<template>
	<view>
<!-- 		<cu-custom bgColor="bg-gradual-blue" :isBack="true" :paddingHeight="0">
			<block #backText>返回</block>
			<block #content>按钮</block>
		</cu-custom> -->
		
		<!-- 页头色彩 -->

		<view style="position: relative;">
			<view @click="onClickUser" style="display: flex;align-items: center;padding: 20rpx;">
				<u-avatar size="35" :src="absUrl(userStore.baseInfo.head_icon_url?userStore.baseInfo.head_icon_url:'')"></u-avatar>
				<view style="margin: 0 20rpx;font-size: 28rpx;font-weight: bold;"><text>{{userStore.baseInfo.name?userStore.baseInfo.name:'未登录用户'}}</text></view>
				<u-icon name="arrow-right" size="12"></u-icon>
			</view>
			<view style="display: flex;justify-content: center;align-items: center;transform: translateY(50%);position: absolute;right: 0px;bottom:50%;width: 180rpx;height: 60rpx;border-radius: 100px 0 0 100px;background-color: red;background-image: linear-gradient(90deg,#ffac25,#ffcd35);">
				<u-icon :customStyle="{fontWeight:'blob'}" name="share" color="#fff" size="20"></u-icon>
				<text style="color: white;font-size: 24rpx;">推荐给朋友</text>
			</view>
		</view>
		 
		<!-- 轮播图 -->
<!-- 		<view style="height: 120px;position: relative;padding: 10px 0;">
			<u-swiper
					radius="10"
					height="100"
					:list="list1"
					indicator
					indicatorMode="line"
					imgMode="aspectFill"
					:autoplay="true"
					:previousMargin="80"
					:nextMargin="80"
					:circular="true"
					
			></u-swiper>
		</view> -->
		
		<view style="
			background-image:linear-gradient(45deg,#eee600,#ffbf00);
			height: 300rpx;
			margin:30rpx 30rpx 0 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			box-shadow: 0 2px 7px 1px #bca445a4;
			position: relative;
			overflow: hidden;
		"> 
			<view style="right:-10%;bottom:50%;position: absolute;z-index:0;transform: rotate(30deg) translate(0,50%);" >
				<i class="iconfont icon-a-guanlijijinshangzhangjiaoyi" style="font-size:300rpx;color:#ffffff33;"></i> 
			</view>
			
			
			<view style="left:0;bottom:50%;position: absolute;z-index:0;transform: rotate(30deg) translate(0,50%);" >
				<i class="iconfont icon-wenli" style="font-size:300rpx;color:#ffffff33;"></i> 
			</view>

			<view style="position: relative;z-index:1;">
				<view style="display: flex;flex-direction: column;padding:15rpx 25rpx;">
					<view style="display: flex;justify-content: space-between;margin-bottom: 10rpx;">
						<view style="flex:3;">
							<view style="color:#666;padding:8rpx 0;font-size: 24rpx;"> 我的收入</view> 
							<view style="font-size: 40rpx;font-weight: 600;"> 19489.42</view>
						</view>
						<view style="flex:3">
							<view style="color:#666;padding:6rpx 0;font-size: 24rpx;"> 可提现</view>
							<view style="font-size: 40rpx;font-weight: 600;"> 99.60</view>
						</view>
						<view >
							账单
						</view>
					</view>
					
					<!-- 产量统计 -->
					<view style="display: flex;margin-bottom: 10rpx;">
						<view style="flex:1;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view style="color:#666;padding:6rpx 0;font-size: 24rpx;">项目/活动</view>
								<view style="font-size: 30rpx;font-weight: 600;">2/232</view>
							</view>
						</view>
						<view style="flex:1;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view style="color:#666;padding:6rpx 0;font-size: 24rpx;">完结/%</view>
								<view style="font-size: 30rpx;font-weight: 600;">233/{{((223/233)).toFixed(2)}}</view>
							</view>
						</view>
						<view style="flex:1;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view style="color:#666;padding:6rpx 0;font-size: 24rpx;">招聘</view>
								<view style="font-size: 30rpx;font-weight: 600;">2234</view>
							</view>
						</view>
					</view>
					
					<!-- 社交统计 -->
					<view style="display: flex;">
						<view style="flex:1;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view style="color:#666;padding:6rpx 0;font-size: 24rpx;">动态</view>
								<view style="font-size: 30rpx;font-weight: 600;">49</view>
							</view>
						</view>
						<view style="flex:1;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view style="color:#666;padding:6rpx 0;font-size: 24rpx;">关注</view>
								<view style="font-size: 30rpx;font-weight: 600;">394</view>
							</view>
						</view>
						<view style="flex:1;display: flex;flex-direction: column;">
							<view style="display: flex;flex-direction: column;align-items: center;">
								<view style="color:#666;padding:6rpx 0;font-size: 24rpx;">查看</view>
								<view style="font-size: 30rpx;font-weight: 600;">2234</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="padding: 30rpx 30rpx 0;font-size: 26rpx;font-weight: bold;">
			基础功能
		</view>
	 
		<view style="display: flex;flex-wrap:wrap;margin: 0rpx 30rpx">
			<template v-for="(item,index) in base_icons" >
				<view v-if="permission(item.roles)" style="flex:0 0 20%;display: flex;justify-content: center;align-items: center;padding: 20rpx 10rpx;">
					<view style="display: flex;flex-direction: column;align-items: center;" >
						<i class="iconfont" :class="[item.icon]" style="width: 56rpx;height:56rpx;"></i>
						<text style="font-size: 23rpx;padding:10rpx">{{item.name}}</text>
					</view>
				</view>
			</template>
		</view>
		
		<view style="padding: 0rpx 30rpx 0;font-size: 26rpx;font-weight: bold;">
			创作者
		</view>
			 
		<view style="display: flex;flex-wrap:wrap;margin: 0rpx 30rpx">
			<template v-for="(item,index) in creator_icons" >
				<view @click="item.click" v-if="permission(item.roles)" style="flex:0 0 20%;display: flex;justify-content: center;align-items: center;padding: 20rpx 10rpx;">
					<view style="display: flex;flex-direction: column;align-items: center;" >
						<i class="iconfont" :class="[item.icon]" style="width: 56rpx;height:56rpx;"></i>
						<text style="font-size: 23rpx;padding:10rpx">{{item.name}}</text>
					</view>
				</view>
			</template>
		</view>
		
		<view style="padding: 0rpx 30rpx 0;font-size: 26rpx;font-weight: bold;">
			兼职
		</view>
			 
		<view style="display: flex;flex-wrap:wrap;margin: 0rpx 30rpx">
			<template v-for="(item,index) in work_icons" >
				<view v-if="permission(item.roles)" style="flex:0 0 20%;display: flex;justify-content: center;align-items: center;padding: 20rpx 10rpx;">
					<view style="display: flex;flex-direction: column;align-items: center;" >
						<i class="iconfont" :class="[item.icon]" style="width: 56rpx;height:56rpx;"></i>
						<text style="font-size: 23rpx;padding:10rpx">{{item.name}}</text>
					</view>
				</view>
			</template>
		</view>
		
		<view v-if="permission(shop_icons.roles)" >
			<view style="padding: 0rpx 30rpx 0;font-size: 26rpx;font-weight: bold;">
				商城
			</view>
				 
			<view style="display: flex;flex-wrap:wrap;margin: 0rpx 30rpx">
				<template v-for="(item,index) in shop_icons.features" >
					<view v-if="permission(item.roles)" style="flex:0 0 20%;display: flex;justify-content: center;align-items: center;padding: 20rpx 10rpx;">
						<view style="display: flex;flex-direction: column;align-items: center;" >
							<i class="iconfont" :class="[item.icon]" style="width: 56rpx;height:56rpx;"></i>
							<text style="font-size: 23rpx;padding:10rpx">{{item.name}}</text>
						</view>
					</view>
				</template>
			</view>
		</view>
		
		<!-- 设置项目 -->
		<view style="border-radius: 20rpx;margin: 10rpx 40rpx;background-color: white;">
			<template v-for="(item,index) in items" >
				<view @click="item.click" v-if="permission(item.roles)" style="padding: 30rpx 10px;display: flex;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<i class="iconfont" :class="[item.icon]"></i>
						<text style="padding-left: 5px;">{{item.text}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</template>

		</view>
		
		<!-- 页面头衬 -->
		<view :style="{height:placeholdHeight + 120 + 40 + 'px'}" style="">
		</view>

		<!-- 页面底衬 -->
		<!-- <view style="height: 140rpx;width: 100%;background-color: #f00;"></view> -->

		<!-- 底部操作条 -->
		<!-- view
			style="background-color: #fff;width: 100%;height: 140rpx;box-shadow: 1px 9px 20px 0px #000000d4;position: fixed;bottom: 0;">
			<view style="
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				">
				<view style="flex: 0 0 20%;text-align: center;color: #f00;">
					<view style="
						display: flex;
						flex-direction: column;
						align-items: center;">
						<u-icon name="setting" color="#9c9c9c" size="40"></u-icon>
						<p style="color: #9c9c9c;font-size: 24rpx;">管理</p>
					</view>
				</view>

				<view style="flex: 0 0 80%;">
					<view class="cu-btn round" style="
							display: flex;
							margin: 0 20rpx;
							border-radius: 250px;
							font-size: 30rpx;
							background-color: #ff8725d4;
							color: white;
							height: 90rpx;
						">
						立即提交
					</view>
				</view>
			</view>
		</view -->
	</view>
</template>

<script>
	import tabbs from '@/pages/tabbs/tabbas.vue'
	import colorHeader from '@/components/color-header/color-header.vue'
	export default {
		components:{tabbs,colorHeader},
		data() {
			return {
				tabBarIndex:0,
				title: 'Hello',
				tabList: [{
                    name: '我发布的',
                }, {
                    name: '我参与的',
                }, {
                    name: '我收藏的',
                }],
				list1: [
					this.absUrl('/static/swipers/swiper1.png'),
					this.absUrl('/static/swipers/swiper2.png'),
					this.absUrl('/static/swipers/swiper3.png')
				],
				base_icons:[
					{
						name:'钱包',
						icon:'icon-a-15-01',
					},
					{
						name:'订单',
						icon:'icon-dingdan1',
					},
					{
						name:'卡卷',
						icon:'icon-kabao',
					},
					{
						name:'会员权益',
						icon:'icon-huiyuan',
					}
				],
				work_icons:[
					{
						name:'兼职任务',
						icon:'icon-fangdichan',
						features:['job'],
					},
					{
						name:'我参与的',
						icon:'icon-shangpin1',
					},
					{
						name:'我收藏的',
						icon:'icon-renyuanpinggu',
					},
				],
				shop_icons:{
					roles:['all'],
					features:[
						{
							name:'订单',
							icon:'icon-fangdichan',
							roles:['job'],
						},
						{
							name:'足迹',
							icon:'icon-shangpin1',
						},
						{
							name:'收藏',
							icon:'icon-renyuanpinggu',
						},
						{
							name:'卡卷',
							icon:'icon-kabao',
						},
						{
							name:'会员权益',
							icon:'icon-huiyuan',
						}
					],
				},
				creator_icons:[
					{
						name:'动态',
						icon:'icon-fangkeyaoqing',
					},
					{
						name:'文章',
						icon:'icon-wenzhang',
						click:this.onArticel
					},
					{
						name:'视频',
						icon:'icon-player-fill',
					},
				],
				items:[
					{
						icon:'icon-shimingrenzheng',
						text:'个人中心', 
						click:this.onPersonalManage
					}, 
					{
						icon:'icon-cardid',
						text:'站点管理',
						click:this.onSiteManage
					},
					{
						icon:'icon-cardid',
						text:'我的活动',
					},
					{
						icon:'icon-cardid',
						text:'我的动态',
					},
					{
						icon:'icon-cardid',
						text:'账号安全',
					},
					{
						icon:'icon-cardid',
						text:'授权',
						roles:['super-admin']
					},
					{
						icon:'icon-31shezhi',
						text:'设置',
					},
					{
						icon:'icon-gy_shijianshangbao',
						text:'版本'
					}
				]
			}
		},
		onShow(){
			console.log(this.userStore.baseInfo)
		},
		methods: {
			onPersonalManage(){
				uni.navigateTo({
					url:'/personal/center'
				})
			},
			onSiteManage(){
				uni.navigateTo({
					url:'/site-center/manage'
				})
			},
			onClickUser(){
				uni.navigateTo({ 
					url:'/user/typecho/login'
				})
			},
			onArticel(){
				uni.navigateTo({
					url: '/contents/manage'
				})
			},
			onHI(){
				console.log("HHIHI")
			},
			onConfirm(){
				uni.navigateTo({
					url:'/pages/job/details/details'
				})
			},
			onTabClick(){
				
			},
			onTabbarClick(index){
				console.log(index)
			},
			onJob(){
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/job/details/details",
						
					})
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep [class^="u-swiper__wrapper__item__wrapper__"]  {
		height: 100% !important;
		// width: 100% !important;
	}
</style>

<style>
	page {
		background-color: transparent;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.nav_bar {
		height: var();
		width: 100%;
	}
	
	.u-page .__slot-icon {
		width: 17px;
		height: 17px;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.action-item {
		border-bottom: solid 1rpx #eee;
	}
	
	.action-item:last-child {
		border-bottom: none;
	}
	
</style>
